 import { createRouter, createWebHashHistory} from "vue-router";
 import event from '@/pages/event.vue';
 import query from '@/pages/query.vue';
import detail from '@/pages/detail.vue';
import params from '@/pages/params.vue';
import content from '@/pages/content.vue';
import propsFather from '@/pages/propsN/Father.vue'
import eventFather from '@/pages/custom_event/Father.vue'
import mittFather from '@/pages/mitt/Father.vue'
import v_modelfather from '@/pages/v_model/Father.vue'
import _$attrs from '@/pages/_$attrs/Father.vue'
import _$refs_$parent from '@/pages/_$refs_$parent/Father.vue'
import provide_inject from '@/pages/provide_inject/Father.vue'
import slot from '@/pages/slot/Father.vue'
import scopeSlot from '@/pages/slot/scopeSlot/Father.vue'

 const router = createRouter({
    /*
    createWebHashHistory:
    (1)http://localhost:5173/#(URL 的哈希部分开始)/xxx/ 访问的URL正确，才能显示界面。
    (2)适用于不需要服务器配置的简单项目。
    */
   //路由环境要配置！
    history: createWebHashHistory(),
    routes:[
        {
            name:'scopeSlot',
            path:'/scopeSlot',
            component:scopeSlot,
        },
        {   
            name:'slot',
            path:"/slot",
            component:slot,
        },
        {
            name:'provide_inject',
            path:'/provide_inject',
            component:provide_inject       
        },
        {
            name:'_$refs_$parent',
            path:'/_$refs_$parent',
            component:_$refs_$parent
        },
        {
            name:'_$attrs',
            path:'/_$attrs',
            component:_$attrs
        },
        {
            name:'v_modelFather',
            path:'/v_modelfather',
            component:v_modelfather

        },
        {
            name:'propsFather',
            path:'/propsfather',
            component:propsFather
        },
        {
            name:'eventFather',
            path:'/eventfather',
            component:eventFather
        },
        {
            name:'mittFather',
            path:'/mittfather',
            component:mittFather
        },
        {
            name:'eventName',
            path:'/event',
            component: event,
        },
        {
            name:'queryName',
            path:'/query',
            component: query,
            children:[
                {
                name:'detailName',
                //注意不需要写'/'
                path:'detail',
                component:detail,
                //二、函数返回对象写法。自定义props给路由组件
                props(route){
                    return route.query;
                }
                //三、静态数据写法。自定义props给路由组件(不好用)
                // props:{
                //  id:1,
                //  title:'静态数据标题',
                //  content:'静态数据内容',
                // }
                }
            ]
        },
        {
            name:'paramsName',
            path:'/params',
            component:params,
            children:[
                {
                    name:'contentName',
                    path:'content/:id/:title/:contentVar?',
                    component:content,
                    //一、将路由收到的所有params参数作为props传递给路由组件
                    props:true,
                }
            ]
        },
        //重定向
        {
            path:'/',
            redirect:'/params'
        }
    ]
 })
 export default router;